/* 响应式布局 */
@media (max-width: 767px) {

    /* 在移动设备上隐藏侧边栏 */
    ion-split-pane {
        --side-width: 0;
        --side-max-width: 0;
    }

    /* 显示底部导航栏 */
    .bottom-tab-bar {
        display: flex;
    }

    /* 移动端菜单按钮 */
    .mobile-menu-button {
        display: block;
    }

    /* 隐藏桌面端菜单按钮 */
    .desktop-menu-button {
        display: none;
    }
}

@media (min-width: 768px) {

    /* 在桌面设备上显示侧边栏 */
    ion-split-pane {
        --side-width: 280px;
        --side-max-width: 320px;
    }

    /* 隐藏底部导航栏 */
    .bottom-tab-bar {
        display: none;
    }

    /* 隐藏移动端菜单按钮 */
    .mobile-menu-button {
        display: none;
    }

    /* 显示桌面端菜单按钮 */
    .desktop-menu-button {
        display: block;
    }
}

/* 底部导航栏样式 */
.bottom-tab-bar {
    background: var(--ion-color-light);
    border-top: 1px solid var(--ion-color-light-shade);
    padding: 5px 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.bottom-tab-bar ion-tab-button {
    --color: var(--ion-color-medium);
    --color-selected: var(--ion-color-primary);
    min-width: 60px;
    transition: all 0.3s ease;
}

.bottom-tab-bar ion-tab-button:hover {
    --color: var(--ion-color-primary);
}

.bottom-tab-bar ion-icon {
    font-size: 24px;
    margin-bottom: 4px;
}

.bottom-tab-bar ion-label {
    font-size: 12px;
    margin-top: 0;
}

/* 侧边栏布局 */
ion-split-pane {
    --border: none;
}

/* 深色主题 */
.dark-theme .bottom-tab-bar {
    background: var(--ion-color-step-50);
    border-top: 1px solid var(--ion-color-step-100);
}

.dark-theme .bottom-tab-bar ion-tab-button {
    --color: var(--ion-color-medium);
    --color-selected: var(--ion-color-primary);
}

.dark-theme .mobile-menu-button ion-icon {
    color: var(--ion-color-light);
}